<template>
<div class="time-line-card">
  <div class="point">{{card.point}}</div>
  <div class="icon-wrap">
    <em v-bind:class="logo[`${card.content.type}`]"></em>
  </div>
  <div class="content-wrap">
    <div v-if="card.content.type === 'station' || card.content.type === 'airport'" class="route">
        {{card.content.from}} 
          <span>{{card.content.number}}</span> 
        {{card.content.to}} 
    </div>
    <div v-if="card.content.type === 'hotel' || card.content.type === 'netcafe'" class="location">
        {{card.content.locName}} 
        <a>
          <em class="iconfont icon-locus"></em>
          {{card.content.address}}
        </a>
    </div>
    <div class="key-value-infos-table">
      <div class="table-item quarter" v-for="(val, key) in card.content.info" :key="key">
        <strong class="label">{{val.label}}</strong>
        <span class="value">{{val.value}}</span>
      </div>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
@import '../../style/_vars.scss';
.time-line-card{
  display: flex;
  flex-flow: row nowrap;
  color: #33459f;
  padding: 10px;
  .point{
    position: absolute;
    top: 40%;
    left: -100px;
  }
  .icon-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    em{
      font-size: 60px;
    }
  }
  .content-wrap{
    flex: 1;
    padding: 10px;
    .route{
      
      span{
        display: inline-block;
        padding: 0 25px;
        transform: translateY(-10px);
        border-bottom: 1px solid gray;// $--border-color-base;
      }
    }
  }
}
</style>

<script>
const LOGO = {
  'station': 'iconfont icon-train',
  'airport': 'iconfont icon-airplane',
  'hotel': 'iconfont icon-home',
  'netcafe': 'iconfont icon-supervision'
}
export default {
  name: '',
  components: {
  },
  props: {
    card: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      logo: LOGO
      
    }
  },
  computed: {
   
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

